import ActionControlAddButton from '@/components/BizButtons/ActionControlAddButton';
import PopconfirmButton from '@/components/BizButtons/PopconfirmButton';
import useActionControl, {
  UseActionControlReturnType,
} from '@/hooks/useActionControl';
import SystemMenuEditModal from '@/pages/system/menu/components/SystemMenuEditModal';
import ApiSystemMenu from '@/services/system/ApiSystemMenu';
import { handleTree } from '@/utils/utils';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import ButtonGroup from 'antd/es/button/button-group';

const SystemMenuIndex = () => {
  const actionControl: UseActionControlReturnType = useActionControl({
    addAction: {
      onActionCall: (values) => ApiSystemMenu.add(values),
    },
    editAction: {
      onModalOpen: (values) => ApiSystemMenu.getInfo(values.menuId),
      onActionCall: (values) => ApiSystemMenu.edit(values),
    },
  });

  return (
    <div>
      <ProTable
        {...actionControl.table}
        request={async (params) => {
          const response = await ApiSystemMenu.list(params);
          const treeData = handleTree(response, 'menuId');
          return {
            data: treeData,
            success: true,
            total: treeData.length,
          };
        }}
        toolBarRender={() => [
          <ActionControlAddButton
            key={'add'}
            actionControl={actionControl}
            initData={{ roleSort: 100 }}
          />,
        ]}
        rowKey={'menuId'}
        columns={[
          { title: '菜单名称', dataIndex: 'menuName' },
          { title: '图标', dataIndex: 'icon', width: 150 },
          { title: '排序', dataIndex: 'orderNum', width: 60 },
          { title: '权限标识', dataIndex: 'perms', ellipsis: true },
          { title: '组件路径', dataIndex: 'component', ellipsis: true },
          { title: '状态', dataIndex: 'status', ellipsis: true },
          { title: '创建时间', dataIndex: 'createTime', hideInSearch: true },
          {
            title: '操作',
            hideInSearch: true,
            render: (text, record) => [
              <ButtonGroup key={'operations'}>
                <Button
                  key="edit"
                  icon={<EditOutlined />}
                  type={'link'}
                  onClick={() => {
                    actionControl.actions.openUpdateModal(record);
                  }}
                >
                  修改
                </Button>
                <PopconfirmButton
                  key={'delete'}
                  buttonText={'删除'}
                  title={'删除后不可恢复, 确认删除吗?'}
                  buttonProps={{
                    danger: true,
                    type: 'link',
                    icon: <DeleteOutlined />,
                  }}
                  onConfirm={async () => {
                    await ApiSystemMenu.remove(record.menuId);
                    message.success('删除成功');
                    actionControl?.table.actionRef?.current?.reload();
                  }}
                />
              </ButtonGroup>,
            ],
          },
        ]}
      />

      <SystemMenuEditModal {...actionControl.editModal} />
    </div>
  );
};

export default SystemMenuIndex;
